<template>
    <div>

        <div style="float: right">
            <el-row>
                <!--<el-col :span="2"><el-button type="primary" @click="add">添加</el-button></el-col>-->
                <el-col :span="22">
                    <el-input placeholder="请输入客户名称" size="small" v-model="search.cName" class="input-with-select">
                        <el-select v-model="search.active" style="width:100px" slot="prepend" placeholder="请选择客户状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="正常" value="1"></el-option>
                            <el-option label="已删除" value="0"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="findData"></el-button>
                    </el-input>
                </el-col>
            </el-row>
        </div>

        <el-table
                :data="usersData.list"
                border
                style="width: 100%">
            <el-table-column
                    label="客户ID"
                    width="70">
                <template slot-scope="scope">
                    <i class="el-icon-client-id"></i>
                    <span style="margin-left: 10px">{{ scope.row.cId}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="联系人"
                    width="80">
                <template slot-scope="scope">
                    <i class="el-icon-name"></i>
                    <span style="margin-left: 10px">{{ scope.row.cName}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="送机时间"
                    width="120">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.postTime}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="手机"
                    width="150">
                <template slot-scope="scope">
                    <i class="el-icon-phone"></i>
                    <span style="margin-left: 10px">{{ scope.row.phone}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="邮箱"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-email"></i>
                    <span style="margin-left: 10px">{{ scope.row.email}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    width="120">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="客户性质"
                    width="100"
                    prop="cType"
                    :formatter="typeformat"
                    highlight-current-row="true">
            </el-table-column>
            <el-table-column
                    prop="active"
                    width="80"
                    label="客户状态">
                <div slot-scope="scope" style="width: 100%;text-align: center">
                    <el-tag v-if="scope.row.active">正常</el-tag>
                    <el-tag v-else type="danger">被删除</el-tag>
                </div>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!--<el-button @click="resetting(scope.row.id)" type="warning" style="transition: .4s;"  :ref="scope.row.id"  icon="el-icon-refresh" size="small" circle></el-button>-->
                    <el-button @click="editUser(scope.row)" type="text" size="middle">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="width: 100%;text-align: center">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="usersData.total"
                    :current-page="this.queryParams.pageNo"
                    :page-size="this.queryParams.pageSize"
                    @current-change="changePageNo">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    // import ToolBar from "@/components/ToolBar.vue";
    //import HelpHint from '@/components/HelpHint.vue';
    import showClient from '@/views/supervision/show_client.vue';
    // import UserEdit from '@/views/userManage/userUpdate.vue';
    //import {setToken} from '../../utils/dataStorage'
    import {ClientList as client} from '../../api/supervision';

    export default {
        inject:['reload'],
        data() {
            return {
                search:{
                    active:"",
                    cName:"",
                    cId:"",
                },
                queryParams:{
                    pageNo:1,
                    pageSize:10,
                    active:"",
                    cName:"",
                },
                usersData: {}
            }
        },
        created() {
            this.getList(this.queryParams);
        },
        watch:{
            queryParams:{
                // changePageNo() {
                //   //console.log('aaaaa')
                //   this.getList();
                // },
                handler: function(){
                    let param = new URLSearchParams();
                    param.append('pageNo',this.queryParams.pageNo);
                    param.append('pageSize',this.queryParams.pageSize);
                    param.append('active',this.queryParams.active);
                    param.append('cName',this.queryParams.cName);
                    this.getList(param);
                },
                deep: true
            }
        },
        methods: {
            getList(params) {
                let that = this;
                console.log("参数"+params);
                client(params).then(r=>{
                    that.usersData = r;
                    console.log(this.usersData);
                }).catch(_=>{
                    console.log(_);
                })
            },
            findData(){
                this.queryParams.pageNo=1;
                this.queryParams.active = this.search.active;
                this.queryParams.cName= this.search.cName;
            },
            typeformat(row, column, cellValue, index){
                if (cellValue == 1) {
                    return "家庭用户";
                }else if (cellValue == 2) {
                    return "单位用户";
                }else if (cellValue == 3) {
                    return "代理商";
                }else{
                    return "签约用户";
                }
            },
            editUser(row){
                let that = this;
                this.$layer.iframe({
                    content: {
                        content: showClient, //传递的组件对象
                        parent: this,//当前的vue对象
                        data: {cId:row.cId}//props
                    },
                    area: ['400px', '500px'],
                    title: '查看客户记录详情',
                    shade: true,
                    shadeClose: false,
                    cancel(){
                        console.log("关闭")
                        let params = new URLSearchParams();
                        params.append('pageNo', '1');
                        params.append('pageSize', '10');
                        that.getList(params);
                    }
                });
            },
            changePageNo(i){
                // alert(i);
                this.queryParams.pageNo=i;
            },
        }
    }
</script>
<style lang="scss">

</style>
